<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/3</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
<div id="root">
  <h1 v-for="(item,key) in arr" v-on:click="clickToDel(key)">{{item}}</h1>
</div>
<script>
    // var arr = [1,2,3,4,5,6,7,8,9];
    // for(var i =0; i<arr.length; i++){
    //     var h1 = document.createElement('h1');
    //     h1.onclick = function(){
    //         this.outerHTML = '';
    //     };
    //     h1.innerText = i;
    //     document.body.appendChild(h1);
    // }
    //原生js或者Jq 直接操作dom 事件驱动 视图变化（眼睛看到的变化：变色，变高，变矮……）
    //不允许直接操作dom 提倡操作数据模型
    //数据驱动视图变化的框架
    //核心 指令【vue合法高性能操作dom的封装】 v-for循环  v-on 绑定事件

    /*
    * v-for       循环数组
    * v-on        绑定事件
    * v-if        显示隐藏元素
    * v-else      显示隐藏元素
    * v-else-if   显示隐藏元素
    * v-bind      显示隐藏元素
    * v-show      显示隐藏元素
    * v-html      绑定html
    * v-text      绑定文本
    * v-pre       跳过编译
    * v-model     双向数据绑定
    * v-cloak     防止页面闪烁
    * v-once      一次性绑定
    * */







    // [1,2,3].forEach(function(item,key) {});
    let config ={
        el:'#root',      //vue所管辖的范围
        data: {
            arr: [1,2,3,4,5,6,7,8,9]
        },   //数据模型
        methods:{
           clickToDel(index){
              this.arr.splice(index,1);
           }
        },//方法 一般是事件绑定的方法
    };
    var app = new Vue(config);

</script>

</body>
</html>
